<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
        <span class="a">1</span> 
        <span class="s">2</span>
        <span class="a">3</span>
        <span class="s">4</span>
        <span class="a">5</span>
        <span class="s">6</span>
        <span  class="a">7</span>
        <span class="s">8</span>
        <span class="a">9</span>
        <span class="s">10</span>
        <span class="a">11</span>
        <span class="s">12</span>
        <span class="a">13</span>
        <span class="s">14</span>
        <span class="a">15</span>
        <span class="s">16</span>
        <span class="a">17</span>
        <span class="s">18</span>
        <span class="a">19</span>
        <span class="s">20</span>
        <span class="a">21</span>
        <hr>
        <div class="b">1</div>
        <div class="d">2</div>
        <div class="b">3</div>
        <div class="d">4</div>
        <div class="b">5</div>
        <div class="d">6</div>
        <div class="b">7</div>
        <div class="d">8</div>
        <div class="b">9</div>
        <div class="b">10</div>
        <div class="b">11</div>
        <div class="d">12</div>
        <div class="b">13</div>
        <div class="d">14</div>
        <div class="b">15</div>
        <div class="d">16</div>
        <div class="b">17</div>
        <div class="d">18</div>
        <div class="b">19</div>
        <div class="d">20</div>
        <div class="b">21</div>
        <hr>
    <p class="q">1</p>
    <p class="p">2</p>
    <p class="q">3</p>
    <p class="p">4</p>
    <p class="q">5</p>
    <p class="p">6</p>
    <p class="q">7</p>
    <p class="p">8</p>
    <p class="q">9</p>
    <p class="p">10</p>
    <p class="q">11</p>
    <p class="p">12</p>
    <p class="q">13</p>
    <p class="p">14</p>
    <p class="q">15</p>
    <p class="p">16</p>
    <p class="q">17</p>
    <p class="p">18</p>
    <p class="q">19</p>
    <p class="p">20</p>
    <p class="q">21</p>
    <style>
        span:nth-child(2n){
            background-color: black;
        }
        span:nth-child(2n+1){
            background-color: blue;
        }
       .a{
           display: inline-block;
           width: 50px;
           height:50px;
           color: aliceblue;
           text-align: center;
           line-height: 50px;
           border-radius: 50%;
           border: 1px red solid;
           margin-top: 10px;
       }
       .s{
           display: inline-block;
           width: 50px;
           height: 50px;
           color: aliceblue;
           text-align: center;
           line-height: 50px;
           border-radius: 50%;border: 1px red solid;
           margin-top: 10px;

       }
       div:nth-child(2n){
           background-color: black;
           
       }
       div:nth-child(2n+1){
           background-color: blue;
       }
       .b{
           display: inline-block;
           width: 50px;
           height: 50px;
           color: aliceblue;
           text-align: center;
           line-height: 50px;
           border-radius: 50%;
           border: 1px red solid;
           margin-top: 10px;
       }
       .d{
        display: inline-block;
           width: 50px;
           height: 50px;
           color: aliceblue;
           text-align: center;
           line-height: 50px;
           border-radius: 50%;
           border: 1px red solid;
           margin-top: 10px;
       }
       .q{
           display: inline-block;
           width: 50px;
           height: 50px;
           color: aliceblue;
           line-height: 50px;
           text-align: center;
           border: 1px red solid;
           border-radius: 50%;
       }
       .p{
           display: inline-block;
           width: 50px;
           height: 50px;
           line-height: 50px;
           color: aliceblue;
           text-align: center;
           border: 1px red solid;
           border-radius: 50%;
       }
       p:nth-child(2n){
           background-color: black;
       }
       p:nth-child(2n+1){
           background-color: blue;
       }
    
    </style>
</body>
</html>